
(function() {

    // ************************************************************************
    // Fix window size
    // ************************************************************************
    var scale = {

        _options : {
            sel         : '.page-content',

            slideWidth  : 320,
            slideHeight : 450,

            // Could be 'width' / 'height' / 'auto'
            fixMode     : 'auto'
        },

        _curRatio  : 1,
        _docWidth  : 0,
        _docHeight : 0,

        _calcScaleRatio: function(){

            this._docWidth  = document.documentElement.clientWidth,
            this._docHeight = document.documentElement.clientHeight;

            var ratio = {
                width  : this._docWidth  / this._options.slideWidth,
                height : this._docHeight / this._options.slideHeight
            };

            this._curRatio = ratio[this._options.fixMode] ? ratio[this._options.fixMode] :
                    ratio.width > ratio.height ? ratio.height : ratio.width;

            return this;
        },

        _fixEl: function(){

            var ratio = this._curRatio;

            $(this._options.sel).attr('style', '-webkit-transform:scale(' + ratio + ',' + ratio + ');' +
                    '-webkit-transition:all 0.5s;');

            return this;
        },

        fitWindow: function(){
            return this._calcScaleRatio()._fixEl();
        },

        bindResize: function() {

            // Resize content on 'resize' event
            var resizeTimeoutId = 0,
                that = this;

            $(window).bind('resize', function() {

                resizeTimeoutId && clearTimeout(resizeTimeoutId);

                setTimeout(function() {
                    that.fitWindow();
                }, 1000);
            });

            return this;
        }
    };

    var page1 = {

        _onOp: null,

        _bindEvent: function() {

            var pressTimeoutId = 0,
                fingerEl = $('.page1 .finger'),
                that = this;

            fingerEl.bind('touchstart', function(e) {

                e.preventDefault();
                e.stopPropagation();

                fingerEl.addClass('active');

                pressTimeoutId && clearTimeout(pressTimeoutId);
                pressTimeoutId = setTimeout(function() {
                    fingerEl.addClass('done');
                    that._onOp && that._onOp();
                }, 3000);

                return false;

            }).bind('touchend', function(e) {

                e.preventDefault();
                e.stopPropagation();

                fingerEl.removeClass('active');
                pressTimeoutId && clearTimeout(pressTimeoutId);

                return false;
            });

            return this;
        },

        leave: function(callback) {

            $('.page1').addClass('leave');

            callback && setTimeout(callback, 4000);

            return this;
        },

        init: function(onOp) {
            this._onOp = onOp;
            return this._bindEvent();
        },

        unload: function() {

            $('.page1 .finger').unbind('touchstart touchend');
            $('.page1').remove();

            return this;
        }
    };

    var page2 = {

        _onOp: null,

        _bindEvent: function() {

            var that = this;

            $('.page2').one('touchmove', function() {

                $('.board').addClass('moving');

                setTimeout(function() {
                    $('.board').removeClass('moving').addClass('answer');
                }, 1000);

                setTimeout(function() {
                    that._onOp && that._onOp();
                }, 2000);
            });

            return this;
        },

        enter: function() {

            var pageEl = $('.page2'),
                that = this;

            pageEl.removeClass('pre');

            setTimeout(function() {
                pageEl.addClass('enter');
                that._bindEvent();
            }, 1500);

            return this;
        },

        leave: function(callback) {

            var pageEl = $('.page2'),
                that = this;

            pageEl.removeClass('enter').addClass('leave');

            callback && setTimeout(callback, 2000);

            return this;
        },

        init: function(onOp) {
            this._onOp = onOp;
            return this;
        },

        load: function() {
            $('body').append($('#tplpage2').html());
            scale.fitWindow();
            return this;
        },

        unload: function(callback) {

            var el = $('.page2');

            el.fadeOut(1000, function() {
                el.remove();
                callback && callback();
            });

            return this;
        }
    };

    var titlePage = {

        _el       : null,
        _swipeCbk : null,
        _currIdx  : 0,

        _bindEvent: function() {

            var that = this;

            this._el.one('touchmove', function() {
                that._swipeCbk && that._swipeCbk();
                that._swipeCbk = null;
            });

            return this;
        },

        _goNext: function() {

            if (this._currIdx < 3) {
                this._el.removeClass('s1 s2 s3').addClass('s' + ++this._currIdx);
            }

            return this;
        },

        setSwiptCbk: function(callback) {
            this._swipeCbk = callback;
            return this;
        },

        show: function() {

            var that = this;

            this._el.fadeIn(1000, function() {
                that._el.removeClass('hidden');
            });

            setTimeout(function() {
                that._bindEvent();
            }, 3000);

            return this;
        },

        hide: function() {

            var that = this;

            this._el.addClass('hidden');

            setTimeout(function() {
                that._el.fadeOut(500, function() {
                    that._goNext();
                });
            }, 1500);

            return this;
        },

        init: function() {
            this._el = $('.titlepage');
            this._goNext();
            return this;
        },

        load: function() {
            $('body').append($('#tpltitlepage').html());
            scale.fitWindow();
            return this;
        }
    };

    var page3 = {

        _el: null,
        _gZ: 0,
        _stop: false,
        _onOp: null,

        _fixEl: function(gZ) {

            var docWidth  = document.documentElement.clientWidth,
                docHeight = document.documentElement.clientHeight,
                transY;

            gZ = (gZ > 0) ? 0 : gZ;

            transY =  (docWidth * 2.5 - docHeight) * gZ / -10;

            this._el.attr('style', 'bottom: -' +
                    transY + 'px; -webkit-transition:all 0.3s;');

            return this;
        },

        _bindEvent: function() {

            var that = this,
                isIPhone = (/ip(hone|ad)/i.test(navigator.userAgent.toLowerCase()));

            // if (false) {
            if (window.DeviceMotionEvent) {

                window.addEventListener("devicemotion", function(event) {
                    that._gZ = event.accelerationIncludingGravity.z;
                    isIPhone && (that._gZ = -that._gZ);
                }, false);

            } else {
                this._gZ = -9;
            }

            $('.page3 .meteor').one('touchmove', function() {
                that._stop = true;
                that._onOp && that._onOp();
            });

            return this;
        },

        _autoRefresh: function() {

            var that = this;

            (function refresh() {

                that._fixEl(that._gZ);

                if (that._gZ <= -7) {
                    that._el.addClass('top');
                }

                if (!that._stop) {
                    setTimeout(refresh, 100);
                }
            }());

            return this;
        },

        leave: function(callback) {
            this._el.removeClass('top');
            callback && setTimeout(callback, 1000);
            return this;
        },

        init: function(onOp) {

            this._el = $('.page3');
            this._onOp = onOp;

            return this._bindEvent()._autoRefresh();
        },

        load: function() {
            $('body').append($('#tplpage3').html());
            return this;
        },

        unload: function(callback) {

            var that = this;

            this._el.fadeOut(1000, function() {
                that._el.remove();
                callback && callback();
            });

            return this;
        }
    };

    var page4 = {

        _onOp: null,

        _bindEvent: function() {

            var that = this,
                done = false;

            $('.page4').bind('touchstart', function(e) {

                if (e.originalEvent.touches.length > 1) {

                    done = true;

                    $('.page4').removeClass('touch').addClass('moving');

                    that._onOp && setTimeout(that._onOp, 5000);

                    return false;

                } else {

                    if (!done) {
                        $('.page4').addClass('touch');
                    }

                    return false;
                }
            });

            return this;
        },

        leave: function(callback) {
            $('.page4').addClass('leave');
            callback && setTimeout(callback, 2000);
            return this;
        },

        init: function(onOp) {
            this._onOp = onOp;
            return this._bindEvent();
        },

        load: function() {
            $('body').append($('#tplpage4').html());
            scale.fitWindow();
            return this;
        },

        unload: function(callback) {

            var el = $('.page4');

            el.fadeOut(1000, function() {
                el.remove();
                callback && callback();
            });

            return this;
        }
    };

    var page5 = {

        _bindEvent: function() {

            $('.share-btn').click(function(e) {
                e.preventDefault();
                $('.page5').addClass('s-share leave');
                return false;
            });

            $('.share').bind('touchstart', function() {
                $('.page5').removeClass('s-share');
            });

            $('.refresh-btn').click(function(e) {
                e.preventDefault();
                window.location.reload();
                return false;
            });

            return this;
        },

        enter: function() {
            $('.page5').addClass('enter');
            return this;
        },

        init: function() {
            return this._bindEvent();
        },

        load: function() {
            $('body').append($('#tplpage5').html());
            scale.fitWindow();
            return this;
        }
    }

    var mediator = {

        onPage1Op: function() {
            page2.init(mediator.onPage2Op);

            page1.leave(function() {
                page2.enter();
                page1.unload();
                titlePage.load().init();
                page3.load();
            });
        },

        onPage2Op: function() {
            page2.leave(function() {
                titlePage.setSwiptCbk(function() {
                    page2.unload();
                    titlePage.hide();
                    setTimeout(function() {
                        page3.init(mediator.onPage3Op);
                        page4.load();
                    }, 2000);
                }).show();
            });
        },

        onPage3Op: function() {
            page3.leave(function() {
                titlePage.setSwiptCbk(function() {
                    page3.unload();
                    titlePage.hide();
                    setTimeout(function() {
                        page4.init(mediator.onPage4Op);
                        page5.load();
                    }, 2000);
                }).show();
            });
        },

        onPage4Op: function() {
            page4.leave(function() {
                titlePage.setSwiptCbk(function() {
                    page4.unload();
                    titlePage.hide();
                    setTimeout(function() {
                        page5.init().enter();
                    }, 2000);
                }).show();
            });
        }
    };

    $(function() {

        $('body, html').bind('touchmove', function() {
            return false;
        });

        scale.bindResize();
        scale.fitWindow();

        page1.init(mediator.onPage1Op);
        page2.load();

    });

}());